<template>
	<div class="login">
		<el-tabs v-model="activeName">
			<el-tab-pane label="登录" name="login">
				<el-form class="form">
					<el-form-item>
						<el-input type="email" placeholder="邮箱地址"></el-input>
					</el-form-item>

					<el-form-item>
						<el-input type="password" placeholder="密码"></el-input>
					</el-form-item>

					<el-form-item class="verify-img">
						<el-input placeholder="图形验证码"></el-input>
						<div class="img-box"></div>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" class="btn-login">登录</el-button>
					</el-form-item>
				</el-form>
				<a class="forget-password" @click="forget_word" href="javascript:;">忘记密码</a>
			</el-tab-pane>
			<el-tab-pane label="注册" name="register">
					<el-form class="form">
						<el-form-item>
							<el-input type="email" placeholder="邮箱地址"></el-input>
						</el-form-item>

						<el-form-item>
							<el-input type="password" placeholder="密码"></el-input>
						</el-form-item>

						<el-form-item>
							<el-input type="password" placeholder="确认密码"></el-input>
						</el-form-item>

						<el-form-item>
							<el-input placeholder="手机号码"></el-input>
						</el-form-item>

						<el-form-item class="verify-img">
							<el-input placeholder="图形验证码"></el-input>
							<div class="img-box"></div>
						</el-form-item>

						<el-form-item class="verify-number">
							<el-input placeholder="短信验证码"></el-input>
							<el-button class="btn-getNumber"  type="info">获取验证码</el-button>
						</el-form-item>

						<el-form-item>
							<el-button type="primary">提交</el-button>
							<el-button>重置</el-button>
						</el-form-item>
					</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
export default {
	name:"login",
	data (){
		return {
			activeName:'login',
		}
	},
	methods:{
		forget_word(){
			this.$router.push('/forget_password')
		}
	}
}
</script>


<style>
.login{
	position: absolute;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	z-index: 1;
}
.el-tabs{
	width:400px;
	position: absolute;
	top:200px;
	right: 15%;
	padding: 22px 30px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow:0 0 10px 2px rgba(0,0,0,0.1);
}
.el-tabs__nav{
	  margin: 0 auto;
		width: 96px;
		float: none !important;
}
.el-tabs__item{
	font-size: 18px;
}
.verify-img .el-form-item__content,.verify-number .el-form-item__content{
	display: flex;
	justify-content: space-between;
}
.verify-img .el-form-item__content .el-input,.verify-number .el-form-item__content .el-input{
	width: 58%;
}
.verify-img .el-form-item__content .img-box{
	width: 40%;
	background-color: #000;
}
.verify-number .el-form-item__content .btn-getNumber{
	width: 40%
}
.btn-login{
	width: 100%;
}
.forget-password{
	color: #409EFF;
	font-size: 12px;
}
</style>
